<template>
  <view class="login-password">
    <u-navbar
      :placeholder="true"
      bgColor="transparent"
      title=" "
      leftIcon=" "
      :autoBack="true"
      :safeAreaInsetTop="true"></u-navbar>
    <view class="t">输入新密码</view>
    <view class="box flex-between">
      <template v-if="show">
        <input
          class="inp"
          type="text"
          placeholder="新密码应为6-15位英文、数字、符号组合"
          v-model="pass" />
      </template>
      <template v-else>
        <input
          class="inp"
          type="password"
          placeholder="新密码应为6-15位英文、数字、符号组合"
          v-model="pass" />
      </template>
      <view class="flex">
        <image
          v-show="pass"
          src="/static/image/clear.png"
          mode="aspectFit"
          class="icon1"
          @click="() => (pass = '')"></image>
        <image
          v-show="!show && pass"
          src="/static/image/eye.png"
          mode="aspectFit"
          class="icon"
          @click="() => (show = !show)"></image>
        <image
          v-show="show && pass"
          src="/static/image/eye-s.png"
          mode="aspectFit"
          class="icon"
          @click="() => (show = !show)"></image>
      </view>
    </view>
    <view class="box flex-between">
      <template v-if="show1">
        <input
          class="inp"
          type="text"
          placeholder="确认两次密码输入内容一致"
          v-model="pass1" />
      </template>
      <template v-else>
        <input
          class="inp"
          type="password"
          placeholder="确认两次密码输入内容一致"
          v-model="pass1" />
      </template>
      <view class="flex">
        <image
          v-show="pass1"
          src="/static/image/clear.png"
          mode="aspectFit"
          class="icon1"
          @click="() => (pass1 = '')"></image>
        <image
          v-show="!show1 && pass1"
          src="/static/image/eye.png"
          mode="aspectFit"
          class="icon"
          @click="() => (show1 = !show1)"></image>
        <image
          v-show="show1 && pass1"
          src="/static/image/eye-s.png"
          mode="aspectFit"
          class="icon"
          @click="() => (show1 = !show1)"></image>
      </view>
    </view>
    <view :class="['btn', pass && pass1 ? 'ac' : '']" @click="goCode">
      完成
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pass: "",
      pass1: "",
      show: false,
      show1: false,
    };
  },
  methods: {
    goCode() {
      if (!this.pass) {
        this.$alert("请输入密码");
        return;
      }
      if (!this.pass1) {
        this.$alert("请输入密码");
        return;
      }
      if (this.pass != this.pass1) {
        this.$alert("两次输入密码不一致");
        return;
      }
      this.toRoute("/login-success");
    },
  },
};
</script>

<style lang="scss">
page {
  height: 100%;
}
.login-password {
  width: 100%;
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 0 32upx;
  .t {
    font-weight: bold;
    font-size: 40rpx;
    color: #000000;
    margin-top: 60upx;
    margin-bottom: 110upx;
  }
  .box {
    width: 100%;
    height: 80rpx;
    background: #f5f7f9;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    box-sizing: border-box;
    padding: 0 24upx;
    margin-bottom: 32upx;
    .inp {
      width: 100%;
      height: 100%;
      font-size: 28rpx;
    }
  }
  .icon1 {
    width: 24upx;
    height: 24upx;
  }
  .btn {
    width: 100%;
    height: 80rpx;
    background: #f49c0d;
    border-radius: 64rpx 64rpx 64rpx 64rpx;
    text-align: center;
    line-height: 80upx;
    font-weight: bold;
    font-size: 28rpx;
    color: #ffffff;
    opacity: 0.4;
    margin-top: 132upx;
  }
  .icon {
    width: 24upx;
    height: 20upx;
    margin-left: 24upx;
  }
  .ac {
    opacity: 1;
  }
}
</style>
